<template>
  <div class="photo-info">
    <h3 class="title">{{photoInfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间{{photoInfo.add_time|timeFormat}}</span>
      <span>点击{{photoInfo.click}}数</span>
    </p>
    <hr>
    <!-- 缩略图 -->
   <div>
    <vue-preview
      :list="imgList"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
     
    />
  </div>
    <!-- 图片内容区域 -->
    <div class="content" v-html="photoInfo.content"></div>
    <!-- 评论子组件 -->
    <comment :id="id"></comment>
  </div>
</template>
<script>
import comment from "../subcompents/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoInfo: {},
      imgList:[]
    };
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(function(res) {
        this.photoInfo = res.body.message[0];
      });
    },
    getImg(){
        this.$http.get('api/getthumimages/'+this.id).then(function(res){
            if(res.body.status==0){
                console.log(res.body.message);
                res.body.message.forEach(function(element){
                    element.w=600,
                    element.h=400
                })
            }
            this.imgList=res.body.message
        })
    }
  },
  created() {
    this.getPhotoInfo();
    this.getImg()
  },
  components: {
    comment
  }
};
</script>   
<style lang="scss" scoped>
.photo-info {
  padding: 0 5px;
  font-size: 13px;
  .title {
    font-size: 15px;
    text-align: center;
    color: #26a2ff;
    line-height: 30px;
    padding-top: 10px;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
  }
  .content {
    line-height: 30px;
  }
}
</style>
